{% extends "base.html" %}

{% block head_title %}{{ institution.name }} Catalog Home{% endblock %}

{% block more-js %}
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.droppable.js"></script>
-->
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.async.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/entity.js"></script>

{% endblock %}
{% block more-css %}
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/demo/screen.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" />
<style>
 #login-div { position: absolute;
              top: 10px;
			  left: 80%;
			  border: 1px solid black; }
</style>
{% endblock %}

{% block header %}
<div id="header-div">
<h2 id="header-title"><a href="/">Aikido Catalog</a></h2>
<h3 id="header-subtitle"><a href="/">http://aikidocatalog.appspot.com/</a> Next Generation Catalog</h3>
</div>
{% endblock %}

{% block contents %}
<table>
<tr>
<td valign="top" width="120px">
<table>
<tr>
<td valign="top">
<p style="font-family: arial;font-size: 120%;font-weight:bold">
A<br/>
i<br/>
k<br/>
i<br/>
d<br/>
o<br/>
<br/>
C<br/>
a<br/>
t<br/>
a<br/>
l<br/>
o<br/>
g</br>
</p>
</td>
<td valign="top" align="left">
<img src="http://upload.wikimedia.org/wikipedia/commons/9/99/Aikido_Kanji.png" />
</td>
</tr>
<!-- END kanja TABLE //-->
</table>
</td>
<td valign="top">
<div id="main-tabs">
<ul>
 <li><a href="#search-tab">Search</a></li>
 <li><a href="#browse-tab">Browse</a></li>
 {% if cataloger %}
 <li><a href="#cataloger-tab">Cataloger Tools</a></li>
 {% endif %}
 <li><a href="#about-tab">About</a></li>
 <li><a href="#help-tab">Help</a></li>
</ul>
<div id="search-tab">
<form id="search-form" name="search-form">
<label>Search:</label>
<input type="text" name="query" id="id_query" size="60">
<select name="query_type" id="id_query_type">
<option value="all">Everything</option>
{% for r in search_options %}<option value="{{ r|lower }}">{{ r }}</option>{% endfor %}
</select>
<input type="submit" value="Go" />
</form>
<div id="search-results">

</div>
<div id="facet-filter">

</div>
<!-- END search-tab DIV //-->
</div>
<div id="browse-tab">
<ul id="entities-tree" class="filetree">
</ul>
<!-- END browse-tab DIV //-->
</div>
{% if cataloger %}
<div id="cataloger-tab">
<table>
<tr>
<td>
<ul id="all-entities-tree" class="filetree">
{% for class in all_entities %}
<li><span class="folder">{{ class.name }} <button onclick="AddEntity('{{ class.value }}')">Add</button></span>
<ul>
{% for entity in class.existing %}
 <li><span class="file"><a href="#" onclick="DisplayEntity('{{ entity.key }}')">{{ entity|pretty_entity }}</a>
 <button onclick="EditEntity('{{ entity.key }}')">Edit</button>
 <button onclick="DeleteEntity('{{ entity.key }}')">Delete</button></span></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</td>
<td valign="top">
<div id="cataloger-action-display">

</div>
</td>
</tr>
</table>
<!-- END of Cataloger DIV //-->
</div>
{% endif %}
<div id="about-tab">
<div style="background-color: rgb(255,255,128);width: 30%">
<label>About Aikido Catalog</label>
<p>This website is a next-generation catalog for <a href="/help?term=aikido">Aikido</a> related
   resources currently curated by Jeremy Nelson as a demonstration of the latest development
   version of <a href="http://code.google.com/p/ecataloger/">eCataloger</a>.
</p>
</div>
<div style="width:20%">
Contact:
<p>Jeremy Nelson<br/>
   Gunnison, CO<br />
   <a href="mailto:client.services@tomichiinformatics.com">e-mail</a>|(970) 462-7808
</p>
</div>
<!-- END about-tab DIV //-->
</div>
<div id="help-tab">
<form id="help-search" name="help-search">
<input name="help-query" type="text" size="40" />
<input type="submit" value="Go" />
</form>
<div id="help-results">

</div>
<!-- END help-tab DIV //-->
</div>
<!-- END main-tabs DIV //-->
</div>
</td>
<td valign="top">
<p>Latest <a href="http://jermsingunny.blogspot.com/search/label/Aikido">Aikido</a> related blog entries by Jeremy Nelson</p>
<p>HIGHLIGHT CATALOG TOPIC</p>
<p>HIGHLIGHT CATALOG CREATOR</p>
</td>
</tr>
{% if quote %}
<tr>
<td colspan="3">
<div id="catalog-quotes">{{ quote }}</div>
</td>
</tr>
{% endif %}
<!-- END contents TABLE //-->
</table>
{% endblock %}

{% block page-dialogs %}
<div id="get-entity-dialog" title="Get Entity">
<input type="hidden" name="calling_element" id="id_calling_element" value="" />
<select id="id_entity_select" name="entity_select">
{% for entity in all_entities %}
 <option value="{{ entity.value }}">{{ entity.name }}</option>
{% endfor %}
</select>
<button onclick="PopulateDisplay('id_entity_select')">Display</button>
<div id="id-dialog-entity-results"></div>
</div>
{% endblock %}

{% block body-js %}
<script>
 $(document).ready(function() {
   $("#main-tabs").tabs();
   $("#entities-tree").treeview({
      url: '/entities/json',
   });
   $("#all-entities-tree").treeview();
   $("#get-entity-dialog").dialog({
      autoOpen: false,
      modal: true,
	  minHeight: 300,
	  minWidth: 500,
      buttons: {
       "Ok": function() {
	     UpdateCallingElement();
         $(this).dialog("close");
       },
	   "Cancel": function() {
	     $(this).dialog("close");
	   }
      }
      });
 });
</script>
{% endblock %}

